<script setup lang="ts">
import {Delete, Search} from "@element-plus/icons-vue";
import {onBeforeMount, ref, reactive} from "vue";
import type {Ref} from "vue";
import {pageAcl, createAcl, deleteAcl, updateAcl} from "@/api/acl";
import type {AclResponse, PageAclRequest, CreateAclRequest, UpdateAclRequest} from "@/api/acl";
import {ElMessage} from "element-plus";
import type {FormInstance, FormRules} from "element-plus";

const aclData: Ref<AclResponse[]> = ref([])
const pageAclRequest: Ref<PageAclRequest> = ref({
  pageIndex: 1,
  pageSize: 10
})
const total: Ref<number> = ref(0)
const createDialogVisible = ref(false)
const updateDialogVisible = ref(false)
const createAclRequest: Ref<CreateAclRequest> = ref({})
const updateAclRequest: Ref<UpdateAclRequest> = ref({})
const createAclRef = ref<FormInstance>()
const updateAclRef = ref<FormInstance>()

const permissionOptions = [
  {
    value: 1,
    label: '允许',
  },
  {
    value: 0,
    label: '禁止',
  }
]

const actionOptions = [
  {
    value: 1,
    label: '订阅',
  },
  {
    value: 2,
    label: '发布',
  },
  {
    value: 3,
    label: '订阅和发布',
  }
]

const createAclRules = reactive<FormRules>({
  username: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入用户名！',
    }
  ],
  topic: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入topic！',
    }
  ],
  permission: [
    {
      required: true,
      trigger: 'change',
      message: '请选择权限！',
    }
  ],
  action: [
    {
      required: true,
      trigger: 'change',
      message: '请选择动作！',
    }
  ]
})

const updateAclRules = reactive<FormRules>({
  username: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入用户名！',
    }
  ],
  topic: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入topic！',
    }
  ],
  permission: [
    {
      required: true,
      trigger: 'change',
      message: '请选择权限！',
    }
  ],
  action: [
    {
      required: true,
      trigger: 'change',
      message: '请选择动作！',
    }
  ]
})

onBeforeMount(() => {
  pageAclData()
})

function pageAclData() {
  pageAcl(pageAclRequest.value).then(res => {
    total.value = Number(res.data.total);
    aclData.value = res.data.body
  })
}

function createAclData() {
  if (!createAclRef.value) return
  createAclRef.value.validate((valid) => {
    if (valid) {
      createAcl(createAclRequest.value).then(() => {
        pageAclData()
        createDialogVisible.value = false
      })
    }
  })
}

function updateAclData() {
  if (!updateAclRef.value) return
  updateAclRef.value.validate((valid) => {
    if (valid) {
      updateAcl(updateAclRequest.value).then(() => {
        pageAclData()
        updateDialogVisible.value = false
      })
    }
  })
}

function removeAcl(id: number): void {
  deleteAcl(id).then(() => {
    ElMessage.success("删除成功")
    pageAclData()
  })
}

function currentChange(value: number): void {
  pageAclRequest.value.pageIndex = value
  pageAclData()
}

function updateButton(row: AclResponse) {
  updateDialogVisible.value = true;
  updateAclRequest.value.id = row.id
  updateAclRequest.value.username = row.username
  updateAclRequest.value.permission = row.permission
  updateAclRequest.value.action = row.action
  updateAclRequest.value.topic = row.topic
}

function createDialogClose() {
  if (!createAclRef.value) return
  createAclRef.value.resetFields()
  createAclRequest.value = {}
}

function updateDialogClose() {
  if (!updateAclRef.value) return
  updateAclRequest.value = {}
  updateAclRef.value.resetFields()
}
</script>

<template>
  <el-row>
    <el-input v-model="pageAclRequest.username" placeholder="用户名" clearable/>
    <el-input v-model="pageAclRequest.topic" placeholder="topic" clearable/>
    <el-select v-model="pageAclRequest.permission" clearable placeholder="权限">
      <el-option v-for="item in permissionOptions" :key="item.value" :label="item.label" :value="item.value"/>
    </el-select>
    <el-select v-model="pageAclRequest.action" clearable placeholder="动作">
      <el-option v-for="item in actionOptions" :key="item.value" :label="item.label" :value="item.value"/>
    </el-select>
    <el-button type="primary" :icon="Search" @click="pageAclData">搜索</el-button>
    <el-button type="primary" @click="createDialogVisible = true">添加授权</el-button>
  </el-row>
  <el-table max-height="60vh" :data="aclData" empty-text="暂无数据">
    <el-table-column min-width="100px" prop="username" label="用户名"/>
    <el-table-column min-width="100px" prop="permission" label="权限"
                     :formatter="(row:any) => row.permission ? '允许' : '禁止'"/>
    <el-table-column min-width="100px" prop="action" label="动作"
                     :formatter="(row:any) => row.action == 1 ? '订阅' : row.action == 2 ? '发布' : '订阅和发布'"/>
    <el-table-column min-width="100px" prop="topic" label="topic"/>
    <el-table-column min-width="100px" prop="createDatetime" label="创建时间"/>
    <el-table-column min-width="100px" label="操作">
      <template #default="scope">
        <el-button type="primary" size="small" plain @click="updateButton(scope.row)">修改</el-button>
        <el-popconfirm title="确认要删除此授权吗？" confirm-button-text="确认" cancel-button-text="取消"
                       confirm-button-type="danger" @confirm="removeAcl(scope.row.id)">
          <template #reference>
            <el-button type="danger" size="small" plain :icon="Delete">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination layout="prev, pager, next" :page-size="pageAclRequest.pageSize" :total="total"
                 :current-page="pageAclRequest.pageIndex" @current-change="currentChange" hide-on-single-page/>
  <el-dialog v-model="createDialogVisible" title="添加授权" @closed="createDialogClose" width="800">
    <el-form ref="createAclRef" :model="createAclRequest" :rules="createAclRules" label-width="auto" :inline="true">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="createAclRequest.username" placeholder="用户名" clearable/>
      </el-form-item>
      <el-form-item label="topic" prop="topic">
        <el-input v-model="createAclRequest.topic" placeholder="topic" clearable/>
      </el-form-item>
      <el-form-item label="权限" prop="permission">
        <el-select v-model="createAclRequest.permission" placeholder="权限">
          <el-option v-for="item in permissionOptions" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="动作" prop="action">
        <el-select v-model="createAclRequest.action" placeholder="动作">
          <el-option v-for="item in actionOptions" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="createDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="createAclData">确认</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="updateDialogVisible" title="修改授权" @closed="updateDialogClose" width="800">
    <el-form ref="updateAclRef" :model="updateAclRequest" :rules="updateAclRules" label-width="auto" :inline="true">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="updateAclRequest.username" placeholder="用户名" clearable/>
      </el-form-item>
      <el-form-item label="topic" prop="topic">
        <el-input v-model="updateAclRequest.topic" placeholder="topic" clearable/>
      </el-form-item>
      <el-form-item label="权限" prop="permission">
        <el-select v-model="updateAclRequest.permission" placeholder="权限">
          <el-option v-for="item in permissionOptions" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="动作" prop="action">
        <el-select v-model="updateAclRequest.action" placeholder="动作">
          <el-option v-for="item in actionOptions" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateAclData">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-input {
  width: 230px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.el-select {
  width: 230px;
  margin-right: 10px;
}

.el-table {
  width: 100%;
  margin-top: 10px;
}

.el-pagination {
  margin-top: 20px;
}
</style>